<html>
<head>
    <!--Index-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <title>Graphic Land</title>
    <link rel="stylesheet" id="main-css" href="/public/home/css/style.css" type="text/css"
          media="all"/>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300&amp;subset=latin,latin-ext' rel='stylesheet'
          type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600&amp;subset=latin,cyrillic' rel='stylesheet'
          type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'/>
    <meta name="viewport" content="width=device-width, initial-scale=0.8"/>

    <!--About-->
    <link href='http://fonts.googleapis.com/css?family=Signika:400,300&amp;subset=latin,latin-ext' rel='stylesheet'
          type='text/css'/>

    <!--Chart-->
    <link rel="stylesheet" href="/public/home/js/mediaelement/mediaelementplayer.min.css"/>
    <style type="text/css">
        .blog-row-item {
            opacity: 0;
        }

        .blog-row-after {
            display: none;
        }
    </style>

    <!--Item-->
    <script type="text/javascript" src="/public/home/js/analytics.js"></script>
    <script type="text/javascript" src="/public/home/js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="/public/home/js/jquery-ui-1.js"></script>
    <script type="text/javascript" src="/public/home/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="/public/home/js/jquery-migrate.js"></script>

    <!--Contact-->

    <script type="text/javascript" src="/public/home/js/jquery-1.8.2.js"></script>
    <script src="/public/Highcharts-4.0.4/js/highcharts.js"></script>

    <style>
        /*
        .main-wrapp-right-b,#map,.main-wrapp-right,.main-wrapp,.contacts-map {height:100%; min-height:100%;}
        */
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var $height = $(document).height() - 66;
            $('.contacts-map').height($height);
            $(window).resize(function () {
                setTimeout(function () {
                    var $height = $('.main-wrapp-left').height() - 56;
                    $('.contacts-map').height($height);
                }, 200);
            });

        });


    </script>

</head>
<body class="main-page">

<!-- main-wrapp -->
<div class="main-wrapp">

    <div class="main-wrapp-left">
        <div id="header-container">
            <div class="header-container-a">
                <div class="header-container-b">
                    <div class="header-logo"><a href="/"><img
                                src="/public/home/img/logo2.png"
                                alt=""/></a></div>
                    <div class="header-slogan">You do creative, we’ll do the rest
                    </div>
                    <!-- // left-menu // -->
                    <div class="left-menu">
                        <ul>
                            <li><a id="_menu_home" href="/">Home</a>
                            </li>

                            <li><a id="_menu_gallery" href="#">Gallery</a>

                                <div class="left-menu-lvl">
                                    <ul>
                                        <?php
                                        foreach ($cats as $cat) {
                                            echo '<li><a id="_menu_gallery_' . $cat->id . '" href="/?cat=' . $cat->id . '">' . $cat->name . '</a></li>';
                                        }
                                        ?>
                                    </ul>
                                </div>
                            </li>

                            <li><a id="_menu_contact" href="/contact">Contacts</a></li>
                            <li><a id="_menu_makemoney" href="/makemoney">Make money</a></li>
                            <?php if ($user_permission == 0 && $user_permission != null) {
                                echo '<li><a href="/admin">Admin Panel</a></li>';
                            }?>
                            <?php if (($user_permission == 2 || $user_permission == 0) && $user_permission != null) {
                                echo '<li><a id="_menu_upload" href="/upload">Upload new item</a></li>';
                            }?>
                            <?php
                            if (isset($hasPurchased) && $hasPurchased)
                                echo '<li><a id="_menu_purchased" href="/purchased">Purchased Item</a></li>';
                            if ((isset($hasCensored) && $hasCensored) || (isset($hasPending) && $hasPending)) {
                                ?>
                                <li><a id="_menu_uploaded" href="#">Uploaded Item</a>

                                    <div class="left-menu-lvl">
                                        <ul>
                                            <?php
                                            if (isset($hasPending) && $hasPending)
                                                echo '<li><a id="_menu_pending" href="/pending">Pending Item</a></li>';
                                            if (isset($hasCensored) && $hasCensored)
                                                echo '<li><a id="_menu_censored" href="/censored">Censored Item</a></li>';

                                            ?>
                                        </ul>
                                    </div>
                                </li>
                            <?php
                            }
                            ?>

                            <?
                            if ($is_logged_in) echo '<li><a id="_menu_cart" href="/cart"><img style="height: 12px; margin-right: 10px;" src="/public/home/img/cart.png"/>Cart</a></li>';
                            ?>

                        </ul>
                    </div>
                    <!-- \\ left-menu \\ -->

                    <div class="menu-widget">
                        <!-- // side-block // -->
                        <div class="side-block">
                            <div class="side-lbl">How to find us</div>
                            <div class="side-contacts">
                                Email: admin@graphicland.com<br/>
                                Phone: <span>+84 777 <b>55-32-21</b></span><br/>
                                19th Floor, Bitexco Office Building, HCMC<br/>
                            </div>
                        </div>
                        <!-- \\ side-block \\ -->
                        <div class="side-social">
                            <a href="#" class="side-social-twitter"></a>
                            <a href="#" class="side-social-facebook"></a>
                        </div>

                        <div class="side-footer">Graphic Land 2014 &copy; by Hùng & Hưng</div>
                    </div>

                </div>
            </div>
        </div>
        <br class="clear none"/>
    </div>

    <div class="main-wrapp-right">
        <div class="main-wrapp-right-b">
            <div id="iframe" class="padding-bottom">

                <div class="portfolio-overlay"></div>

                <!-- // artwork zoom // -->
                <div class="artwork-zoom artwork-zoom-mp">
                    <div class="artwork-zoom-a">
                        <a href="#" class="artwork-post-next">
			<span class="artwork-post-counter">
				<span class="artwork-post-counter-a">1 of 2</span>
			</span>
                        </a>
                        <a href="#" class="artwork-post-prev">
			<span class="artwork-post-counter">
				<span class="artwork-post-counter-a">1 of 4</span>
			</span>
                        </a>

                        <div class="artwork-zoom-cotrols">
                            <a href="#" class="artwork-zoom-prev"></a>
                            <a href="#" class="artwork-zoom-next"></a>
                            <a href="#" class="artwork-zoom-close"></a>
                        </div>
                        <div class="artwork-zoom-img">
                            <div class="flexslider">
                                <ul class="slides">
                                    <li><img src="/public/home/img/zoom-img-01.jpg" alt=""/></li>
                                    <li><img src="/public/home/img/zoom-img-02.jpg" alt=""/></li>
                                    <li><img src="/public/home/img/zoom-img-01.jpg" alt=""/></li>
                                </ul>
                            </div>
                        </div>
                        <div class="artwork-zoom-text">
                            <div class="artwork-zoom-lbl">Amazing Office</div>
                            <div class="artwork-zoom-lbl-a"><a href="#">Photography</a></div>
                            <div class="artwork-zoom-lbl-b">Sed ut perspiciatis unde omnis iste natus error sit
                                voluptatem
                                accusantium
                                doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
                                quasi
                                architecto beatae vitae dicta sunt explicabo.
                            </div>
                        </div>
                    </div>
                </div>
                <!-- \\ artwork zoom \\ -->

                <div id="theme-wrapper">

                    <div class="header-top">
                        <div class="header-top-l">
                            <div
                                style="text-decoration: none; text-transform: uppercase; font-family: 'Oswald', sans-serif; margin-left: 20px; height: 40px; margin-top: 23px; ">
                                <?php if ($is_logged_in) {
                                    ?>
                                    <p style="font-family: 'Oswald', sans-serif;">Welcome <a href="/profile"
                                                                                             style="font-weight: bolder; color: #e13d18; font-family: 'Oswald', sans-serif;"><?php echo $user_name ?></a>,
                                        <a href="/logout" style="font-family: 'Oswald', sans-serif;">logout</a></p>
                                <?php
                                } else {
                                    ?>
                                    Not a member? <span
                                        style=" cursor: pointer; cursor: hand; font-weight: bold; color: #e13d18; font-family: 'Oswald', sans-serif;"
                                        onclick="login()">Register or Login</span>
                                <?php } ?>
                            </div>
                        </div>
                        <div class="header-top-r">
                            <div class="header-search" style="margin-right: 20px;">
                                <a href="#" class="header-search-btn"></a>

                                <div class="header-search-a">
                                    <div class="header-search-b">
                                        <form id="searchForm" action="/">
                                            <input type="text" value="<?php echo isset($query) ? $query : '' ?>"
                                                   placeholder="Start typing..." name="q" id="query">
                                        </form>
                                        <a href="#" class="search-close"></a>
                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="clear"></div>
                    </div>


                    <?php echo $content_for_layout; ?>
                </div>
            </div>


        </div>
    </div>
</div>

<div class="mobile-footer"></div>
<!-- /main-wrapp -->

<!--Index-->
<script type="text/javascript" src="/public/home/js/jquery.1.7.1.js"></script>
<script type="text/javascript" src="/public/home/js/isotope-a.js"></script>
<script type="text/javascript" src="/public/home/js/isotope.js"></script>
<script type="text/javascript" src="/public/home/js/script.js"></script>
<script type="text/javascript" src="/public/home/js/viewport.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.gallery-sort-nav a').click(function () {
            var $sortBy = '.' + $(this).text();
            if ($sortBy == '.all') {
                var $sortBy = '*';
            }
            $('.gallery-sort-nav a').removeClass('active');
            $(this).addClass('active');
            $('#isotope-container').isotope({ filter: $sortBy });
            return false;
        });
        $('.flexslider').flexslider({
            animation: "fade",
            slideshow: false
        });
    });
</script>

<!--About-->
<script type="text/javascript" src="/public/home/js/jquery.animateNumber.js"></script>
<script type="text/javascript" src="/public/home/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="/public/home/js/twitterfeed.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.percentage-s').each(function () {
            var $value = $(this).attr('data-percentage');
            if ($(this).is(':in-viewport')) {
                $(this).animate({
                    width: $value + '%'
                }, 1400);
            }
        });

        $(".services-item").each(function (index) {
            if ($(this).is(':in-viewport')) {
                $(this).delay(211 * index).animate({
                    opacity: 1
                }, 900);
            }
        });

        $(document).scroll(function () {
            $('.percentage-s').each(function () {
                var $value = $(this).attr('data-percentage');
                if ($(this).is(':in-viewport')) {
                    $(this).animate({
                        width: $value + '%'
                    }, 1400);
                }
            });

            $('.services-item').each(function (index) {
                if ($(this).is(':in-viewport')) {
                    $(this).delay(141 * index).animate({
                        opacity: 1
                    }, 900);
                }
            });
        });

        $('#searchForm').submit(function () {
            var q = $('#query').val();
            var cat = location.href.match('cat=([0-9]+)');
            if (cat) {
                cat = cat[1];
                location.href = '/?cat=' + cat + '&q=' + q.replace(/\s/g, '+');
            }
            else return true;
            return false;
        })
    });
</script>

<!--Chart-->
<script src="/public/home/js/mediaelement/mediaelement-and-player.min.js"></script>
<script type="text/javascript">
    var container = jQuery('.blog-row');
    var content = jQuery('.blog-row-item', container).clone();
    container.html('');
    $(window).load(function () {
        setTimeout(function () {
            container.isotope({
                itemSelector: '.blog-row-item'
            }, function () {
                $('.blog-row-item').css('opacity', '1');
                $('.blog-row-after').delay(300).show();
            });
            container.isotope('insert', content, function () {
            });
            $('.flexslider').flexslider({
                animation: "fade",
                slideshow: false
            });
            var $height = $('.blog-row-item .post-image.with-slider img').height();
            $('.blog-row-item .post-image.with-slider').height($height);
            container.isotope({
                itemSelector: '.blog-row-item'
            });
            $('audio,video').mediaelementplayer();
        }, 100);
    });
    $(window).resize(function () {
        var $height = $('.blog-row-item .post-image.with-slider img').height();
        $('.blog-row-item .post-image.with-slider').height($height);
        setTimeout(function () {
            container.isotope({
                itemSelector: '.blog-row-item'
            });
        }, 100);
    });
</script>

<!--Item-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>-->
<script type="text/javascript" src="/public/home/js/modernizr.js"></script>
<script type="text/javascript" src="/public/home/js/custom-libraries.js"></script>
<script type="text/javascript" src="/public/home/js/jquery.tiptip.js"></script>
<script type="text/javascript" src="/public/home/js/jquery.validate.js"></script>
<script type="text/javascript" src="/public/home/js/hoverdir.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.flexslider').flexslider({
            animation: "fade",
            slideshow: false
        });
    });
</script>

<!--Contact-->
<script type="text/javascript" src="../../../public/home/js/jquery.form.js"></script>
<script type="text/javascript" src="../../../public/home/js/jquery.foggy.js"></script>
<div id="login"
     style="background: rgba(0, 0, 0, 0.7); top: 0px; left: 0px; width: 100%; height: 100%; z-index: 99; position: fixed; padding-top: 80px; margin-bottom: 80px;"
     hidden="hidden">
    <link href="/public/home/css/login.css" rel="stylesheet" type="text/css" media="all"/>
    <div class="container">
        <div class="row">
            <div class="text-center">
                <h1><img src="/public/home/img/logo2.png"/></h1>

                <div class="photo-form-wrapper">
                    <form id="loginForm" style="position: relative">
                        <div id="loginDiv">
                            <input style="font-size: 13px" class="form-email" type="text" placeholder="Email Address"
                                   name="email">
                            <input style="font-size: 13px" class="form-password" type="password" placeholder="Password"
                                   name="password">
                        </div>
                        <input style="font-size: 13px" class="login-btn btn-filled" type="submit" value="Login"
                               id="loginButton">
                    </form>
                    <form id="regForm" style="position: relative;" hidden="hidden">
                        <div id="regDiv">
                            <input style="font-size: 13px" class="form-email" type="text" placeholder="Email Address"
                                   name="email" id="emailReg">
                            <input style="font-size: 13px" class="form-email" type="text" placeholder="Full Name"
                                   name="name">
                            <input style="font-size: 13px" class="form-email" type="text" placeholder="Phone Number"
                                   name="tel">
                            <input style="font-size: 13px" class="form-password" type="password" placeholder="Password"
                                   name="password" id="password">
                            <input style="font-size: 13px" class="form-password" type="password"
                                   placeholder="Confirm Password" name="confirmPassword">
                        </div>
                        <input style="font-size: 13px" class="login-btn btn-filled" type="submit" value="Register"
                               id="regButton">
                    </form>
                    <form id="forgotForm" style="position: relative;" hidden="hidden">
                        <input style="font-size: 13px" class="form-email" type="text" name="email"
                               placeholder="Email Address">
                        <input style="font-size: 13px" class="login-btn btn-filled" type="submit" id="forgotBtn"
                               value="Reset Password">
                    </form>
                </div>
                <a class="text-white" id="createAccount">Create an account ➞</a><br>
                <a class="text-white" id="loginBack" hidden="hidden">Login ➞</a><br>
                <a class="text-white" id="forgotPassword">I've forgotten my password</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

var login = function () {
    //$('#login').removeAttr('hidden');

    $("#login").fadeIn();
    $('.main-wrapp').foggy({
        blurRadius: 4,
        opacity: 1,
        cssFilterSupport: true
    });

}
$('#login').click(function () {
    $("#login").fadeOut()
    $('.main-wrapp').foggy(false);

})
$('#login').children().on('click', function (event) {
    if ($(this).is('div')) event.stopPropagation();
});

$('#createAccount').click(function () {
    setTimeout(function () {
        $('#createAccount').fadeOut();
    }, 1);
    setTimeout(function () {
        $('#forgotPassword').fadeOut();
    }, 1);
    setTimeout(function () {
        $('#loginForm').fadeOut();
    }, 1);
    setTimeout(function () {
        $('#regForm').fadeIn();
    }, 1);
    setTimeout(function () {
        $('#loginBack').fadeIn();
    }, 1);

})
$('#loginBack').click(function () {
    setTimeout(function () {
        $('#createAccount').fadeIn();
    }, 1);
    setTimeout(function () {
        $('#forgotPassword').fadeIn();
    }, 1);
    setTimeout(function () {
        $('#loginForm').fadeIn();
    }, 1);
    setTimeout(function () {
        $('#regForm').fadeOut();
    }, 1);
    setTimeout(function () {
        $('#forgotForm').fadeOut();
    }, 1);
    setTimeout(function () {
        $('#loginBack').fadeOut();
    }, 1);
});
$('#forgotPassword').click(function () {
    setTimeout(function () {
        $('#createAccount').fadeOut();
    }, 1);
    setTimeout(function () {
        $('#forgotPassword').fadeOut();
    }, 1);
    setTimeout(function () {
        $('#loginForm').fadeOut();
    }, 1);
    setTimeout(function () {
        $('#forgotForm').fadeIn();
    }, 1);
    setTimeout(function () {
        $('#forgotPassword').fadeOut();
    }, 1);
    setTimeout(function () {
        $('#loginBack').fadeIn();
    }, 1);
})
$(document).ready(function () {
    <?php
if (isset($query)&&$query!=''){
?>
    $('.header-search-btn').click();
    <?php
    }
    ?>

    $('#regForm').validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            name: {
                required: true
            },
            tel: {
                required: true,
                number: true
            },
            password: {
                required: true,
                minlength: 6
            },
            confirmPassword: {
                required: true,
                equalTo: "#password"
            }
        }
    });
    $('#loginForm').validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true
            }
        }
    });
    $('#forgotForm').validate({
        rules: {
            email: {
                required: true,
                email: true
            }
        }
    });

    $('#regForm').submit(function () {
        if ($(this).valid()) {
            $.post('/register', $(this).serialize())
                .done(function (data) {
                    if (parseInt(data) == 1) {
                        $(this).closest('form').find("input[type!=submit], textarea").val("");
                        $('#regButton').val('Register Successfully');
                        $('#regDiv').fadeOut();
                    }
                    else {
                        $('#regButton').val('Email address existed');
                    }

                })
        }
        return false;
    });

    $('#emailReg').change(function () {
        $('#regButton').val('Register');
    });

    $('#loginForm').submit(function () {
        if ($(this).valid()) {
            $.post('/login', $(this).serialize())
                .done(function (data) {
                    if (parseInt(data) == 1) {
                        $('#loginButton').val('Login Successfully');
                        $('#regDiv').fadeOut();
                        setTimeout(function () {
                            location.reload();
                        }, 1000)
                    }
                    else {
                        $('#loginButton').val('Invalid email or password');
                    }

                })
        }
        return false;
    });

    $('#forgotForm').submit(function () {
        $('#forgotBtn').val('Generating new password');
        if ($(this).valid()) {
            $.post('/login/forgot', $(this).serialize())
                .done(function (data) {
                    if (parseInt(data) == 1) {
                        $('#forgotBtn').val('Reset password email sent');
                    }
                    else {
                        $('#forgotBtn').val('Invalid email');
                    }

                })
        }
        return false;
    });

    $('#loginForm').find('input').change(function () {
        $('#loginButton').val('Login');
    })


});


var activeMenu = function (e) {
    $(e).addClass('current');
};
var url = location.href;
if (url.match('/item')) {
    activeMenu($('#_menu_gallery'));
} else if (url.match('/upload')) {
    activeMenu($('#_menu_upload'));
} else if (url.match('cat=')) {
    activeMenu($('#_menu_gallery'));
} else if (url.match('/contact')) {
    activeMenu($('#_menu_contact'));
} else if (url.match('/makemoney')) {
    activeMenu($('#_menu_makemoney'));
} else if (url.match('/cart')) {
    activeMenu($('#_menu_cart'));
} else if (url.match('/purchased')) {
    activeMenu($('#_menu_purchased'));
}
else if (url.match('/censored') || url.match('/censored')) {
    activeMenu($('#_menu_uploaded'));
}
else activeMenu($('#_menu_home'));


</script>
</body>

</html>